<template>
    <div>
        <div class="addBtn">
            <el-button type="primary" @click="handleButtonAdd(1)">+ 添加</el-button>
            <el-dialog title="添加" :visible.sync="dialogTableVisible">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="比赛分类">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="1">足球</el-radio>
                            <el-radio :label="2">篮球</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="主队名称" prop="name">
                        <el-input v-model="ruleForm.name" @input="getInput"></el-input>
                    </el-form-item>
                    <div style="display: flex;flex-wrap: wrap">
                        <div v-for="(item, index) in dataList" :key="index">
                            <el-radio-group v-model="radio1" @change="changeMatch">
                                <el-radio-button :label="item" style="margin-left: 10px;margin-bottom: 10px">
                                    <div style="margin: 10px;display: flex;flex-direction: column;align-items: center">
                                        <span>{{ item.competition_name }} {{ timestampToTime(item.match_time) }}</span>
                                        <!-- <span>{{ item.home_team_name }} VS {{ item.away_team_name }}</span> -->
                                        <div v-if="ruleForm.type == 1">
                                            <span>{{ item.home_team_name }} VS {{ item.away_team_name }}</span>
                                        </div>
                                        <div v-if="ruleForm.type == 2">
                                            <span>{{ item.away_team_name }} VS {{ item.home_team_name }}</span>
                                        </div>
                                    </div>
                                </el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <el-form-item label="直播封面">
                        <el-upload v-if="dialogImageUrl==''" action="https://api.zctj16888.com/admin/v1/image/ossUpload" list-type="picture-card"
                            ref="uploadImg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                            name="image" :on-success="handleAvatarSuccess">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div v-else>
                                <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
                                <i class="el-icon-delete" @click="deleteImg"></i>
                            </div>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="选择专家" prop="name">
                        <el-select v-model="values" placeholder="请选择">
                            <el-option v-for="item in platformList" :key="item.id" :label="item.nickname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否首页显示">
                        <el-radio-group v-model="ruleForm.lx_day">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="信号源地址">
                        <el-input v-model="videoUrl"></el-input>
                        <el-button size="small" type="primary" @click="createLive">创建信号源</el-button>
                        <p v-if="videoPush" style="color: red;font-size:12px;">
                            服务器：{{  videoPush  }}
                        </p>
                        <p v-if="videoPushCode" style="color: red;font-size:12px;">
                            推流码：{{  videoPushCode  }}
                        </p>
                        <p style="color: red;font-size:12px;">
                            提示: 如果找到能用的赛事直播可以直接复制进去，如果没有请创建信号源
                        </p>
                    </el-form-item>

                   
                    

                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog>
        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            <el-table-column prop="type" label="分类" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">
                        <div class="status-icon"></div>足球
                    </span>
                    <span v-if="scope.row.type == 2">
                        <div class="status-icon"></div>篮球
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="img" label="图片" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 80px; height: 80px" :src="scope.row.img_url" fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="matches" label="主队名称" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.matches.type == 'football'">
                        {{ scope.row.matches.home_team_name }}VS{{ scope.row.matches.away_team_name }}
                    </div>
                    <div v-else>
                        {{ scope.row.matches.away_team_name }}VS{{ scope.row.matches.home_team_name }}
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="url" label="信号源" align="center">
      </el-table-column> -->
            <el-table-column prop="is_home" label="是否首页显示" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_home == 1">
                        <div class="status-icon"></div>是
                    </span>
                    <span v-if="scope.row.is_home == 2">
                        <div class="status-icon"></div>否
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="handleButton1Click(scope.row, 2)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleButton2Click(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { get } from 'sortablejs';
import { matchesLive, hqMatcheList, matchesLiveList, expertList, matchesLiveDeleteList } from '../../../libs/api'
import {  craeteVideoLive } from '@/api/video'
export default {
    data() {
        return {
            tableData: [],
            dialogTableVisible: false,
            ruleForm: {},
            dialogImageUrl: '',
            dialogVisible: false,
            platformList: [],
            values: '',
            currentPage: 1,
            PageSize: 10,
            totalCount: 1,
            pageSizes: [5, 10],
            inputData: '',
            dataList: [],
            radio1: {},
            yz: '',
            matchID: '',
            videoUrl:'',
            videoPush:'',
            videoPushCode: '',
            push_url: ''
        }
    },
    created() {
        this.getMatchesLiveList()
        this.getExpertList()
    },
    methods: {
        async createLive() {
            console.log(this.ruleForm)


            let id = this.ruleForm.id;

            if (!id) {
                this.$message.error('请选择队伍')
                return
            }

            const res = await craeteVideoLive({
                match_id: id
            })

            if (res.code == 1) {

                this.$message.success('创建成功，已自动为你填入')

                this.videoUrl = res.data.play_url

                setTimeout(() => {
                    this.$message.success('已生成推流链接，请复制使用')
                },1000)

                this.videoPush = res.data.push_url.split('live/')[0] + 'live'
                this.videoPushCode = res.data.push_url.split('live/')[1]
                this.push_url = res.data.push_url
            }
            
                // 
        },
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage = val
            this.getMatchesLiveList()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
            this.getMatchesLiveList()
        },
        changeMatch(e) {
            // this.radio1 = e
            // console.log(this.radio1)
            // this.open = true
            console.log(e)
            console.log(this.ruleForm.type)
            this.ruleForm.id = e.id
            if (this.ruleForm.type == 1) {
                this.ruleForm.name = e.home_team_name + 'VS' + e.away_team_name
            } else {
                this.ruleForm.name = e.away_team_name + 'VS' + e.home_team_name
            }
            this.dataList = []
        },
        clickConfirm() {
            console.log(this.values)
            if (this.yz == 1) {
                console.log(8888888)
                matchesLive({
                    type: this.ruleForm.type,
                    match_id: this.ruleForm.id,
                    img_url: this.ruleForm.img_url,
                    expert_id: this.values,
                    is_home: this.ruleForm.lx_day,
                    signal_url: this.videoUrl,
                    sf_pt :2,
                    push_url: this.push_url
                }).then(res => {
                    // this.$refs.uploadImg.clearFiles()
                    this.dialogTableVisible = false
                    this.getMatchesLiveList()
                })
            } else {
                console.log(77777)
                console.log(this.ruleForm.id)
                console.log(this.matchID)
                matchesLive({
                    type: this.ruleForm.type,
                    match_id: this.ruleForm.id,
                    // img_url: this.ruleForm.img_url,
                    img_url:this.dialogImageUrl,
                    expert_id: this.values,
                    is_home: this.ruleForm.lx_day,
                    signal_url: this.videoUrl,
                    id: this.matchID,
                    sf_pt :2,
                    push_url: this.push_url
                }).then(res => {
                    this.dialogTableVisible = false
                    this.getMatchesLiveList()
                })
            }
            this.ruleForm.type = ''
            this.ruleForm.id = ''
            this.values = ''
            this.ruleForm.lx_day = ''
            this.videoUrl = ''
            this.ruleForm.name = ''
            this.push_url = ''
        },
        getExpertList() {
            expertList({
                page: 1,
                limit: 100
            }).then(res => {
                console.log(res)
                this.platformList = res.data.list
            })
        },
        getInput() {
            // 获取赛事
            hqMatcheList({
                page: 1,
                limit: 10,
                lx: this.ruleForm.type,
                name: this.ruleForm.name
            }).then(res => {
                console.log(res)
                this.dataList = res.data.list.data
            })
        },
        getMatchesLiveList() {
            matchesLiveList({
                page: this.currentPage,
                limit: this.PageSize,
                sf_pt:2
            }).then(res => {
                this.tableData = res.data.list
                this.totalCount = res.data.total
            })
        },
        handleButton1Click(row, e) {
            this.push_url = ''
            this.ruleForm = row
            this.yz = e
            this.matchID = row.id
            this.ruleForm.id = row.match_id
            this.dialogTableVisible = true
            this.dialogImageUrl = this.ruleForm.img_url
            this.values = this.ruleForm.expert_id
            this.ruleForm.lx_day = this.ruleForm.is_home
            this.videoUrl = row.signal_url
            if (this.ruleForm.push_url) {
                this.push_url = this.ruleForm.push_url;
                this.videoPush = this.ruleForm.push_url.split('live/')[0] + 'live'
                this.videoPushCode = this.ruleForm.push_url.split('live/')[1]
            }
            if (this.ruleForm.type == 1) {
                this.ruleForm.name = row.matches.home_team_name + 'VS' + row.matches.away_team_name
            } else {
                this.ruleForm.name = row.matches.away_team_name + 'VS' + row.matches.home_team_name
            }
            console.log(this.ruleForm)
            console.log(this.yz)
        },
        deleteImg(){
            this.dialogImageUrl = ''
        },
        handleButton2Click(row) {
            matchesLiveDeleteList({
                id: row.id
            }).then(res => {
                this.getMatchesLiveList()
            })
        },
        handleButtonAdd(e) {
            this.videoPush = '';
            this.videoPushCode = '';
            this.yz = e
            this.dialogTableVisible = true
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res)
            console.log(URL.createObjectURL(file.raw))
            this.ruleForm.img_url = res.data.url
            this.dialogImageUrl = res.data.url
        },
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes()
            // var s = date.getSeconds();
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            return M + D + h + m;
        },
    }
}
</script>

<style>
.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
}
</style>
